﻿<!DOCTYPE html>
<html>
<head>
    <title>SignalR Simple Chat</title>
    <style type="text/css">
        .container {
            background-color: #99CCFF;
            border: thick solid #808080;
            padding: 20px;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div>
        <h1>SignalR永久连接类 Demo</h1>
        <div>
            <input type="text" id="msgContext" placeholder="请输入消息内容...." />
            <button id="sendMessage" class="btn-primary">Send</button>
            <ul id="messages"></ul>
        </div>
<!--Script references. -->
<!--Reference the jQuery library. -->
<script src="Scripts/jquery-1.6.4.min.js"></script>
<!--Reference the SignalR library. -->
<script src="Scripts/jquery.signalR-2.4.1.min.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<!--<script src="http://localhost:8888/Connections/ChatConnection"></script>-->
<!--Add script to update the page and send messages.-->
<script type="text/javascript">
    $(function () {
        var connection = $.connection("http://localhost:8888/Connections/ChatConnection");
        connection.logging = true;
        //客户端接收消息
        connection.received(function (data) {
            $('#messages').append('<li>' + data + '</li>');
        });
        //连接错误处理
        connection.error(function (err) {
            alert('与服务器连接报错:' + err.message);
        });
        //连接成功
        connection.start().done(function () {
            $('#sendMessage').click(function () {
                var val = $('#msgContext').val();
                //向服务器端发送消息
                connection.send(val);
            });
        });
    })
</script>
</body>
</html>